//单独封装一个列表组件
import { Card, List, Spin, Pagination, Tag } from "antd";
import { Link } from "react-router-dom";
export default function Listdata({ data, loading, currentPage, onPageChange }) {
  return (
    <div>
      <Spin spinning={loading}>
        {/* <List
          grid={{ gutter: 16, column: 2 }}
          dataSource={data.data?.rows || []}
          renderItem={(item) => (
            <List.Item>
              <Link to={"/Detail"}>
                <Card
                  hoverable
                  title={item.title}
                  extra={<span>{item.viewCount}阅读量</span>}
                >
                  <div>
                    <span>
                      创建时间：{new Date(item.createdAt).toLocaleDateString()}
                    </span>
                    <div>
                      {item.tags.map((tag) => {
                        <Tag color="blue" key={tag.name}>
                          {tag.name}
                        </Tag>;
                      })}
                    </div>
                  </div>
                  <div>{item.content.substring(0, 100)}...</div>
                </Card>
              </Link>
            </List.Item>
          )}
        /> */}

        <List
          itemLayout="vertical"
          size="large"
          dataSource={data.data?.rows || []}
          renderItem={(item) => (
            <Link to={"/Detail"}>
              <List.Item hoverable>
                <div>
                  <h2>{item.title}</h2>
                  <div>文章内容：{item.content.substring(0, 100)}...</div>
                  <span>
                    创建时间：{new Date(item.createdAt).toLocaleDateString()}
                    <p>{item.viewCount}阅读量</p>
                  </span>

                  <div>
                    {item.tags.map((tag) => {
                      <Tag color="blue" key={tag.name}>
                        {tag.name}
                      </Tag>;
                    })}
                  </div>
                </div>
              </List.Item>
            </Link>
          )}
        />
      </Spin>
      <Pagination
        current={currentPage}
        onChange={onPageChange}
        pageSize={6}
        total={data.data?.count || 0}
      />
    </div>
  );
}
